<template>
  <div class="workBench app-container">
      <div class="filtrate_box">
        <el-radio-group size="small" v-model="selectTime" @input="timeSection">
          <el-radio-button label="1">本月</el-radio-button>
          <el-radio-button label="2">本季度</el-radio-button>
          <el-radio-button label="3">本年</el-radio-button>
        </el-radio-group>
        
        <el-date-picker
        v-model="startEndTime"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        size="small">
      </el-date-picker>
      </div>
      <div class="allBackground">
        <div class="all_l">
          <demoCondition
            :titleHead="'挂网情况'"
            :dataCondition="gwListStatistics"
            />

            <demoCondition
            :titleHead="'竞价情况'"
            :dataCondition="jjListStatistics"
            class="marginTop"
            />

            <demoCondition
            :titleHead="'成交情况'"
            :dataCondition="cjListStatistics"
            class="marginTop"
            />

            <demoCondition
            :titleHead="'结算情况'"
            :dataCondition="jsListStatistics"
            class="marginTop"
            />
        </div>
        <div class="china_r">
          <chinaEchartsVue/>
        </div>    
      </div>
      
      <!-- <div>
        <statisticsVue/>
      </div> -->


      <div class="lotsDisposition_situation">
        <div class="title_btn_box">
          <p class="title_box">各标的处置情况</p>
          <el-button type="primary" size="small">导出</el-button>
        </div>
        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column type="index" label="序号" width="50">
          </el-table-column>
          <el-table-column prop="classname" label="标的类型" width="180">
          </el-table-column>
          <el-table-column prop="name" label="标的名称">
          </el-table-column>
          <el-table-column prop="bond" label="保证金(元)">
          </el-table-column>
          <el-table-column prop="is_online" label="是否挂网">
            <template slot-scope="scope">
               <span v-if="scope.row.is_online=='0'">未挂网</span>
               <span v-else-if="scope.row.is_online=='1'">挂网审核</span>
               <span v-else-if="scope.row.is_online=='2'">已挂网</span>
            </template>
          </el-table-column>
          <el-table-column prop="state" label="竞拍结果">
            <template slot-scope="scope">
               <span v-if="scope.row.state==0">无</span>
               <span v-else-if="scope.row.state==1">即将开始</span>
               <span v-else-if="scope.row.state==2">进行中</span>
               <span v-else-if="scope.row.state==3">已成交</span>
               <span v-else-if="scope.row.state==4">已流拍</span>
               <span v-else-if="scope.row.state==5">撤拍</span>
               <span v-else-if="scope.row.state==6">暂停</span>
            </template>
          </el-table-column>
          <el-table-column prop="transaction_price" label="成交总额(万元)">
          </el-table-column>
          <el-table-column prop="price" label="结算总额(万元)">
          </el-table-column>
          <el-table-column prop="bidder_name" label="买受人">
          </el-table-column>

        </el-table>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[7, 20, 30, 40]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
  </div>
</template>
  
<script>
  import demoCondition from './demoCondition.vue'
  import {getStartDayOfMonth,getEndDayOfMonth,getYearFirstDay,getYearLastDay,checkQuarterTime,dateOrTime} from '@/utils/index'
  import {information,dispositionList} from '@/api/release'
import chinaEchartsVue from './chinaEcharts.vue'
import statisticsVue from './statistics.vue'
  export default {
    name: 'workBench',
    components:{
      demoCondition,chinaEchartsVue,statisticsVue
    },
    data(){
      return{
        selectTime:'1', //默认本月
        startEndTime:'',
        gwListStatistics:[
          {title:'已发布',icon:'issueFb',num:'0',color:'#0064c8'},
          {title:'已挂网',icon:'hangNet',num:'0',color:'#0064c8'},
          {title:'未挂网',icon:'point',num:'0',color:'#f06b49'},
        ],
        jjListStatistics:[
          {title:'竞价预告',icon:'bell',num:'0',color:'#0064c8'},
          {title:'竞价中',icon:'time',num:'0',color:'#2ebbff'},
          {title:'竞价结束',icon:'finish',num:'0',color:'#f06b49'},
        ],
        cjListStatistics:[
          {title:'已成交',icon:'hammer',num:'0',color:'#0064c8'},
          {title:'已流标',icon:'failureBid',num:'0',color:'#f06b49'},
          {title:'已结算',icon:'closeAccount',num:'0',color:'#35d5d0'},
        ],
        jsListStatistics:[
          {title:'成交总额(万元)',icon:'makeBargain',num:'0',color:'#2ebbff'},
          {title:'结算总额(万元)',icon:'settleMoney',num:'0',color:'#eca32f'},
          // {title:'违约金(万元)',icon:'dedit',num:'0',color:'#f06b49'},
        ],
        page:1,
        limit:10,
        total:0,
        tableData:[]
      }
    },
    mounted(){
      let startMon = getStartDayOfMonth();
      let endMon = getEndDayOfMonth();
      this.startEndTime = [startMon,endMon];
      let s_date= dateOrTime(startMon);
      let e_date= dateOrTime(endMon);
      this.list(s_date,e_date);
    },
    methods:{
      list(start_t,end_t){
        information({start_time:start_t,end_time:end_t}).then(res=>{
          let is_lnline = res.data.is_lnline;
          this.gwListStatistics[0].num = is_lnline.issue_count;
          this.gwListStatistics[1].num = is_lnline.online_count;
          this.gwListStatistics[2].num = is_lnline.no_online_count;
          let bidding = res.data.bidding;
          this.jjListStatistics[0].num = bidding.no_bidding;
          this.jjListStatistics[1].num = bidding.in_bidding;
          this.jjListStatistics[2].num = bidding.end_bidding;
          let is_transaction = res.data.is_transaction;
          this.cjListStatistics[0].num = is_transaction.transaction;
          this.cjListStatistics[1].num = is_transaction.abortive;
          this.cjListStatistics[2].num = is_transaction.settleAccounts;
          let settlement = res.data.settlement;
          this.jsListStatistics[0].num = settlement.transaction_price;
          this.jsListStatistics[1].num = settlement.settlement_price;
        })
        dispositionList({start_time:start_t,end_time:end_t}).then(res =>{
          this.tableData = res.data;
        });
      },
      //月 季度 年
      timeSection(lable){
        if(lable=='1'){ //本月
          let startM = getStartDayOfMonth();
          let endM = getEndDayOfMonth();
          let s_date_m= dateOrTime(startM);
          let e_date_m= dateOrTime(endM);
          this.startEndTime=[startM,endM];
          this.list(s_date_m,e_date_m);
        }else if(lable=='2'){ //本季度
          let obj = checkQuarterTime();
          let startQuarter =obj.start;
          let endQuarter =obj.end;
          let s_date_q= dateOrTime(startQuarter);
          let e_date_q= dateOrTime(endQuarter);
          this.startEndTime=[startQuarter,endQuarter];
          this.list(s_date_q,e_date_q);
        }else{ //b本年
          let startY = getYearFirstDay();
          let endY = getYearLastDay();
          let s_date_y= dateOrTime(startY);
          let e_date_y= dateOrTime(endY);
          this.startEndTime=[startY,endY];
          this.list(s_date_y,e_date_y);
        }
      },
      // 分页
      handleSizeChange(val) {
        this.limit = val
        this.list()
      },
       // 分页
      handleCurrentChange(val) {
        this.page = val
        this.list()
      },
    }
  }
  </script>
  
<style lang="scss" scoped>
  .workBench {
    .filtrate_box{
      text-align: left;
      margin-bottom: 10px;
    }
    .marginTop{
      margin-top: 10px;
    }
    .allBackground{
      display: flex;
      justify-content: space-between;
      gap: 10px;
      .all_l{
        width: 590px;
      }
    }
    .lotsDisposition_situation{
      margin-top: 10px;
      background-color: #fff;
      border-radius: 14px;
      padding:10px;
      .title_btn_box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        .title_box{
          font-size: 14px;
          font-weight: bold;
        }
      }
      
    }
  }
</style>
  